<template>
  <div class="main" v-show="modelValue"></div>
  <div class="dialog" v-show="modelValue">
      <span>{{ title }}</span>
      <div>{{ content }}</div>
      <span class="close" @click="close">X</span>
      <div class="btns">
        <button @click="confirm">确认</button>
        <button @click="close">取消</button>
      </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const props=defineProps({
  modelValue:{
    type:Boolean
  },
  title:{
    type:String,
    default:"弹窗"
  },
  content:{
    type:String,
    default:"内容区域"
  }
})
const $emit=defineEmits(["update:modelValue"]);
const show=ref(props.modelValue);
//关闭/取消按钮
const close=()=>{
  $emit("update:modelValue",show.value);
}
//确认按钮
const confirm=()=>{
  $emit("update:modelValue",show.value);
}
</script>
<style lang="scss" scoped>
.main {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #999999;
  opacity: 0.5;
  z-index: 2;

  .dialog {
    width: 500px;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;

    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      text-align: center;
      width: 30px;
      font-size: 20px;
      font-weight: 700;
    }
    .btns{
      width: calc(100% - 20px);
      display: flex;
      justify-content: flex-end;
      position: absolute;
      bottom: 10px;
      button{
        width: 50px;
        height: 30px;
        background-color: blue;
        border: none;
        margin-left: 20px;
      }
    }
  }
}
</style>
